<template>
  <div>
    <div style="cursor:pointer;" @click="$router.go(-1)"><i class="el-icon-back"></i>返回</div>
    <div style="margin-top:10px;border: 1px solid #EAEAEA; padding: 5px 10px 10px; 0px">
      <div class="title">学员信息</div>
      <div>
        <el-row>
          <el-col style="width:80px">
            <el-avatar :size="60"></el-avatar>
          </el-col>
          <el-col :span="18">
            <el-row>
              <el-col :span="6">
                <div>
                  {{stuinfo.name}}
                  <i class="el-icon-male" v-if="stuinfo.gender=='男'" style="font-weight: bold;color:#409EFF"></i>
                  <i class="el-icon-female" v-if="stuinfo.gender=='女'" style="font-weight: bold;color:#F56C6C"></i>
                </div>
                <div style="line-height: 30px;">
                  <i class="el-icon-mobile"></i><span>{{stuinfo.mobile}}</span><span v-if="stuinfo.mobile!=''"
                    style="color: #acadad;">({{stuinfo.mobiletag}})</span>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <div class="title">报名课程</div>
      <div>
        <div style="margin-bottom: 5px;">
          <el-button-group>
            <el-button type="primary" size="mini" @click="handlePopupCourse">选择课程</el-button>
          </el-button-group>
        </div>
        <div style="padding: 0px 0px 20px 0px; height: 400px;">
          <el-table border :data="courseList" height="100%" >
            <el-table-column label="序号" type="index" align="center"></el-table-column>
            <el-table-column label="" type="expand">
                <template v-slot="scope">
                   <div>
                     <div>开始日期:</div>
                   </div>
                </template>
            </el-table-column>
            <el-table-column label="课程名称" prop="title" width="200px" align="center"></el-table-column>
            <el-table-column label="收费标准" prop="rules" width="300px" align="center">
              <template v-slot="scope">
                <el-select v-model="scope.row.ruleid" @change="handleRuleChange(scope.$index,scope.row,scope.row.ruleid)"
                  style="width: 100%;">
                  <el-option v-for="(item,index) in scope.row.rules" :key="index" :label="item.title"
                    :value="item.ruleid"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="购买数量" prop="count" align="center" width="160px">
              <template v-slot="scope">
                <el-input v-model="scope.row.count" style="width:100%">
                  <template slot="append">{{scope.row.unit}}</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="总价" prop="total" align="center"></el-table-column>
            <el-table-column label="赠送数量" prop="freecount" width="180px">
              <template v-slot="scope">
                <div style="display: flex;">
                <el-input v-model="scope.row.freecount" placeholder="赠送数量" > </el-input>
                <el-select v-model="scope.row.freeunit" style="width: 140px;">
                  <el-option label="课时" value="课时"></el-option>
                  <el-option label="天" value="天"></el-option>
                  <el-option label="月" value="月"></el-option>
                </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="折扣金额" prop="disamount">
              <template v-slot="scope">
                <el-input placeholder="折扣金额" v-model="scope.row.disamount" @change="handleDisamontChange(scope.$index,scope.row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="小计" prop="sum">
              <template v-slot="scope">
                {{parseFloat(scope.row.sum).toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button type="text" @click="handleDeleteRule(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column></el-table-column>
          </el-table>
        </div>
      </div>
      <div style="text-align: right;">
         应付金额:<span> {{sumall}}</span>
      </div>
    </div>

    <PopupCourseUI ref="popupCourseUI" v-if="popupVisible" @selectHandler="handleCourseSelected"></PopupCourseUI>
  </div>
</template>

<script>
  import PopupCourseUI from './popupcourse.vue';
  export default {
    components: {
      PopupCourseUI
    },
    data() {
      return {
        dialogVisible: false,
        stuinfo: {
          name: '',
        },
        sumall:0,
        currentRule: null,
        courseList: [],
        popupVisible: false,
      }
    },
    mounted() {
      this.stuinfo = this.$route.query;
      console.log(this.$route.query);
    },
    methods: {
      handlePopupCourse() {
        this.popupVisible = true;
        this.$nextTick(() => {
          this.$refs.popupCourseUI.dialogVisible = true;
        })
      },
      handleDisamontChange(index,data){
        console.log(index,this.courseList[index]);
        this.handleUpdateSum();
        //this.courseList[index].sum=this.courseList[index].total-this.courseList[index].disamount;
      },
      handleUpdateSum(){
        this.sumall=0;
        this.courseList.forEach(item=>{
            item.sum=item.total-item.disamount;
            this.sumall+=item.sum;
        })
      },
      handleCourseSelected(data) {
        console.log(data);
        var ruleid="";
        var currule=null;
        var rules=data.rules;

        if(data.rule_ids!=""){
            ruleid=data.rule_ids.split(",")[0];
            //查找对应rule
            rules.forEach(rule=>{
              if(rule.ruleid==ruleid){
                  currule=rule;
              }
            })
        }

        //构建课程数据
        var courseData={
          courseid:data.courseid,
          title:data.title,
          ruleid:ruleid+"",
          rules:data.rules,
          count:currule.count,
          total:currule.total,
          unit:currule.unit,
          type:currule.type,
          freecount:0,
          freeunit:'课时',
          disamount:0,
          sum:currule.total
        }

        this.courseList.push(courseData);
         this.handleUpdateSum();

      },
      handleDeleteRule(index, data) {
        this.courseList.splice(index, 1);
      },

      handleRuleChange(index, data,ruleid) {
        console.log("当前行数:",index);
        console.log("数据:",data);
        console.log("计费id:",ruleid);


        var rules=data.rules;
        var currule=null;
        rules.forEach(rule=>{
          if(rule.ruleid==ruleid){
              currule=rule;
          }
        })

        //更新数据
        this.courseList[index].count=currule.count;
        this.courseList[index].total=currule.total;
        this.courseList[index].type=currule.type;
        this.courseList[index].unit=currule.unit;
      },

    }
  }
</script>

<style>
</style>
